<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- <img /> -->
    <!-- <my-com></my-com> -->
    <!-- <img src="#" is="my-img" /> -->
    <my-com></my-com>
</body>
<script>
// 自定义组件
//1.继承html的组件
// class myImg extends HTMLImageElement{
//     constructor(){
//         super();
//         // console.log(this);
//         setTimeout(() => {
//             this.src = "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2534506313,1688529724&fm=26&gp=0.jpg"
//         }, 1000);
//     }
// }
// customElements.define("my-img",myImg,{
//     extends:"img"
// });

// 2.自定义组件

class MyCom extends HTMLElement{
    constructor(){
        super();
        // console.log(this);
        this.innerHTML = "<button>点击</button>"
    }
}
customElements.define("my-com",MyCom)


</script>
</html>